// 基于modal的封装

/*
    obj = {

        type: Enum, // success, warning, error, info
        icon: String, // 自定义icon类，会覆盖掉type
        title: Stirng, // 标题
        message: String, // 信息内容
        centered: Boolean, // 是否居中
        scrollable: Boolean, // 开启内部滚动条
        showCancelButton: Boolean, // 展示取消图标，默认false
        showConfirmButton: Boolean, // 展示确认图标，默认true
        cancelText: String, // 自定义取消按钮文本
        confirmText: Stirng, // 自定义确认按钮文本
        confirmClose: Boolean, // 确认后关闭modal
        onClose: Function(type), // 关闭时的回调函数
        // type == 'confirm', 'cancel', 'close', 'backdrop' 分别对应确认按钮、取消按钮、关闭图标、背景蒙版
    }

*/


export const BtMessageBox = (obj) => {

    // 如法炮制，生成一个唯一id
    const id = "BtModal" + new Date().valueOf() + Math.floor(Math.random() * 10000 + 1000)

    let iconClass = obj.icon
    if (!obj.icon && obj.type) {
        const iconEnum = {
            success: "bi bi-check-circle-fill text-success",
            warning: "bi bi-exclamation-circle-fill text-warning",
            error: "bi bi-x-circle-fill text-danger",
            info: "bi bi-info-circle-fill text-secondary"
        }

        iconClass = iconEnum[obj.type]
    }



    const template = `
    <div id="${ id }" class="modal fade" tabindex="-1" aria-modal="false">
        <div class="modal-dialog ${ obj.scrollable ? 'modal-dialog-scrollable' : '' } ${ obj.centered ? 'modal-dialog-centered' : '' }">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="mr-auto">${ obj.title || '' }</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body d-flex align-items-center">
                    <i class="${ iconClass ? iconClass + " mr-2" : '' }" style="${ iconClass ? 'font-size: 24px;' : ''}"></i>
                    ${ obj.message || '' } 
                </div>
                <div class="modal-footer">
                    ${ obj.showCancelButton == true ? '<button id="modal-cancel" type="button" class="btn btn-secondary" data-dismiss="modal">' + (obj.cancelText || '取消') + '</button>' : '' }
                    ${ obj.showConfirmButton != false ? `<button id="modal-confirm" type="button" class="btn btn-primary" ${ obj.confirmClose != false ? 'data-dismiss="modal"' : '' }>${ obj.confirmText || '确认' }</button>` : '' }
                </div>
            </div>
        </div>
    </div>`

    $("html").append(template)

    const item = $("#" + id)


    let closeType = null
    item.find("#modal-confirm").click(() => {
        if (obj.confirmClose != false) {
            closeType = 'confirm'
        }
    })
    item.find("#modal-cancel").click(() => {
        closeType = 'cancel'
    })
    item.find(".close").click(() => {
        closeType = 'close'
    })

    item.modal('show')

    item.on('hide.bs.modal', () => {
        
    })
    // 监听关闭事件，关闭后删除元素
    item.on('hidden.bs.modal', () => {
        if (obj.onClose) {
            obj.onClose(closeType || 'backdrop')
        }
        item.remove()
    })
}